<template>

  <div>
    <div style="margin-top: 20px">
      <!--<div @click="refreshCanvas">-->
        <!--<VueCanvas :height="40" :width="110" :value="canvasValue"></VueCanvas>-->
      <!--</div>-->

      <div style="margin-top: 15px;">
        <el-input placeholder="请输入内容" size="large" v-model="input2">
          <template slot="append">
            <div @click="refreshCanvas" style="width: 100%">
              <VueCanvas :height="40" :width="110" :value="canvasValue"></VueCanvas>
            </div>
          </template>
        </el-input>
      </div>
    </div>

    <div class="print-box">
      <el-button @click="print">打印</el-button>
      <div id="printArea">
        老师凯迪拉克圣诞节福利科技实力对抗肌肤
      </div>
    </div>

  </div>


</template>

<script>
  import VueCanvas from '../components/VueCanvas'
  import printJs from 'print-js'

  export default {
    components: {
      VueCanvas
    },
    data() {
      return {
        input2:'',
        canvasValue: '2345'
      };
    },
    methods: {
      random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
      },
      refreshCanvas() {
        let value = [];
        for (let i = 0; i < 4; i++) {
          value.push(this.random(1, 9))
        }
        this.canvasValue = value.join('');
      },
      print(){
        printJs('printArea', 'html');
      }
    },
    computed: {},
    mounted() {
    }
  }
</script>

<style scoped lang="less">
  .el-row {
    margin-bottom: 0px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    /*background: #d3dce6;*/
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    /*border-radius: 4px;*/
    /*min-height: 36px;*/
  }

  .row-bg {
    /*padding: 10px 0;*/
    /*background-color: #f9fafc;*/
  }
</style>
